{{--默认图集列表页模板--}}
@extends('theme.jishupucms.layouts.app')

{{-- head投放区域 --}}
@section('head-css-cast')
    @parent
    <link rel="stylesheet" href="{{config('jishupucms.css')}}/image-preview-modal.min.css">
@endsection
@section('head-js-cast')
    @parent
@endsection

{{-- seo --}}
@section('title', $meta['title'])
@section('keywords', $meta['keywords'])
@section('description', $meta['description'])

{{--body class--}}
@section('body-class', 'jsp-bg')

{{-- 核心内容 --}}
@section('content')
    @parent

    {{-- banner --}}
    <section class="jsp-banner-section">
        <x-carousel id="carousel-{{$category->id}}" class="" :list="$ads"/>
    </section>

    {{-- 当前位置 --}}
    <x-breadcrumb :list="$breadcrumb" :class="empty($ads) || $ads->isEmpty() ?'jsp-navheight':''"/>

    {{-- 内容区域 --}}
    <section class="info-picture jsp-content-section container">
        <div class="left picture-title-list  ">
            <div class="row">

                {{--图集列表--}}
                @if (isset($list) && !empty($list))
                    @foreach ($list as $item)
                        <div class="col-md-3 col-sm-4">
                            <div class="card mb-3 shadow-sm ">
                                <figure class="figure">
                                    <img src="{{$item['image_url']}}" class="figure-img img-fluid"
                                         alt="{{$item['title']}}">
                                    <a data-title="{{$item['title']}}" class="link-preview"
                                       title="{{__('common.preview')}}"
                                       data-toggle="modal"
                                       data-target="#info-picture-modal"><i
                                            class="fa-solid fa-magnifying-glass-plus"></i>
                                    </a>
                                    <a {{$item['href_']}} {{$item['href_target_']}} {{$item['rel_']}} class="link-details"
                                       title="{{__('common.view_detail')}}"><i
                                            class="fa-solid fa-eye"></i></a>
                                </figure>
                                <div class="card-body">
                                    <p class="card-text text-center">
                                        <a {{$item['href_']}} {{$item['href_target_']}} {{$item['rel_']}}>{{$item['title']}}</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif

            </div>

            {{--分页--}}
            {{$list->links('vendor.pagination.jishupu')}}

            {{--图片预览--}}
            <x-image-preview-modal id="info-picture" class="" :list="$list"/>
        </div>

        <!-- <div class="right">
          <h3 class="mb-3 pb-3 block-title">right</h3>
        </div> -->

    </section>


@endsection

{{-- 底部投放区域 --}}
@section('footer-cast')
    @parent
    <script type="text/javascript">
        showBigImageModal('info-picture');
    </script>
@endsection
